<template>
  <div>
    <el-form :model="accessForm" :rules="ruleSpareParts" ref="accessForm">
      <el-form-item
        :label="type === 1 ? '入库仓库' : '出库仓库'"
        prop="wareHouseId"
      >
        <el-select
          v-model="accessForm.wareHouseId"
          placeholder="请选择"
          filterable
          @change="handleChange"
        >
          <el-option
            v-for="item in warehouseOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        :label="type === 1 ? '入库类别' : '出库类别'"
        prop="stockTypeId"
      >
        <m7Select
          filterable
          v-model="accessForm.stockTypeId"
          size="mini"
          :options="type === 1 ? inTypeOptions : outTypeOptions"
          :defaultProps="{ value: 'id', label: 'typeName' }"
          placeholder="请选择"
        >
        </m7Select>
      </el-form-item>
      <!-- <el-form-item label="关联工单ID" prop="ticketId">
        <el-input
          v-model.trim="accessForm.ticketId"
          placeholder="请输入"
          size="mini"
        >
        </el-input>
      </el-form-item> -->
      <el-form-item label="说明" prop="description">
        <el-input
          type="textarea"
          :rows="4"
          v-model.trim="accessForm.description"
          placeholder="请输入"
          size="mini"
          maxlength="200"
          show-word-limit
        >
        </el-input>
      </el-form-item>
      <el-form-item label="备件列表">
        <chooseSpare
          ref="chooseSpare"
          :spareTableData="dataList"
          :type="type"
          @checkHouse="checkHouse"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Ref } from 'vue-property-decorator'
import chooseSpare from '@/afterSales/views/spare/stock/chooseSpareParts.vue'
import { state } from '../store/spareData'
interface AccessForm {
  wareHouseId: string
  stockTypeId: string
  // ticketId: string // 关联工单ID暂时不做
  description: string
}
@Component({
  name: 'outIntoHouse',
  components: {
    chooseSpare
  }
})
export default class SparePartsAddOrEdit extends Vue {
  @Ref() private readonly chooseSpare!: chooseSpare
  @Prop() private type!: number

  private $message: any

  public accessForm: AccessForm = { // 出入库
    wareHouseId: '',
    stockTypeId: '',
    // ticketId: '',
    description: ''
  }

  private ruleSpareParts: object = { // 备件信息的校验
    wareHouseId: [{ required: true, message: '请选择仓库', trigger: 'change' }],
    stockTypeId: [{ required: true, message: '请选择类别', trigger: 'change' }],
    description: [{ required: true, message: '请输入说明', trigger: 'blur' }]
  }

  public dataList: any = [] // 表格数据

  get warehouseOptions () {
    return state.houseList
  }

  get outTypeOptions () {
    return state.spareOutStockTypeList
  }

  get inTypeOptions () {
    return state.spareInStockTypeList
  }

  private handleChange (id: any) {
    this.clearDataList()
    this.chooseSpare.getSparePopData(id)
  }

  public clearDataList () {
    this.dataList = []
  }

  public clearValidate () {
    (this.$refs as any).accessForm.resetFields();
  }

  public clearPopData () {
    this.clearValidate()
    this.clearDataList()
    this.chooseSpare.clearPopData()
  }

  private checkHouse () {
    if (!this.accessForm.wareHouseId) {
      return this.$message.error('请先选择仓库')
    }
  }
}
</script>

<style lang="stylus" scoped>
.el-select
  width 100%
</style>
